#!/bin/bash
# FigmaMCPWorkflow 执行脚本示例（可执行版本）
#
# 作用：
#   - 统一触发 Phase5 相关的所有验证命令，减少人工输入
#   - 输出每一步的说明与路径，便于人工接力 Phase0~Phase4 手工流程
#
# 使用方法：
#   ./execution-script.sh ComponentName [params.yaml]
#   1) Phase0~Phase4 仍需按 README/manifest 手动完成（Prompt→Figma采集→Preview→配置→面板）
#   2) 当组件三层注册、Right 面板等资源就绪后，运行本脚本执行 Phase5（lint:templates、phase5、chainvalidator 等）
#
# 实际执行命令：
#   - npm run lint:templates
#   - npm run phase5 -- ComponentName
#   - npm run chainvalidator -- ComponentName
#   - node scripts/phase5/static-analysis.js ComponentName
#   - node scripts/phase5/template-compliance-validator.js ComponentName

set -e  # 遇到错误立即停止

# 颜色定义
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color

# 组件名称（从参数获取）
COMPONENT_NAME=$1
PARAMS_FILE=$2
OUTPUT_ROOT=${OUTPUT_ROOT:-"./${COMPONENT_NAME}"}
PHASE0_DIR="${OUTPUT_ROOT}/phase0"
PHASE1_DIR="${OUTPUT_ROOT}/phase1"
PHASE2_DIR="${OUTPUT_ROOT}/phase2"
PHASE3_DIR="${OUTPUT_ROOT}/phase3"
PHASE4_DIR="${OUTPUT_ROOT}/phase4"
PHASE5_DIR="${OUTPUT_ROOT}/phase5"

if [ -z "$COMPONENT_NAME" ]; then
  echo -e "${RED}错误: 请提供组件名称${NC}"
  echo "用法: $0 <ComponentName> [params.yaml]"
  exit 1
fi

if [ -z "$PARAMS_FILE" ]; then
  PARAMS_FILE="./params/${COMPONENT_NAME}.yaml"
fi

echo -e "${BLUE}========================================${NC}"
echo -e "${BLUE}  FigmaMCPWorkflow 自动执行脚本${NC}"
echo -e "${BLUE}  组件: ${COMPONENT_NAME}${NC}"
echo -e "${BLUE}  参数: ${PARAMS_FILE}${NC}"
echo -e "${BLUE}  输出目录: ${OUTPUT_ROOT}${NC}"
echo -e "${BLUE}========================================${NC}"

# Phase 5: 系统集成验证
echo -e "\n${YELLOW}[Phase 5] 系统集成验证...${NC}"
# 模板一致性自检
npm run lint:templates
if [ $? -ne 0 ]; then
  echo -e "${RED}✗ 模板一致性检查失败${NC}"
  exit 1
fi
npm run phase5 -- "$COMPONENT_NAME"
if [ $? -eq 0 ]; then
  echo -e "${GREEN}✓ Phase 5 完成${NC}"
else
  echo -e "${RED}✗ Phase 5 失败${NC}"
  exit 1
fi

echo -e "\n${YELLOW}运行 ChainValidator...${NC}"
npm run chainvalidator -- "$COMPONENT_NAME"

# 生成最终报告
echo -e "\n${BLUE}========================================${NC}"
echo -e "${BLUE}  工作流执行完成！${NC}"
echo -e "${BLUE}========================================${NC}"

# 显示验证报告摘要
if [ -f "${COMPONENT_NAME}/{PHASE5_DIR}/validation-results.json" ]; then
  echo -e "\n${YELLOW}验证报告摘要:${NC}"
  node -e "
    const report = require('${COMPONENT_NAME}/{PHASE5_DIR}/validation-results.json');
    console.log('  编译状态:', report.results?.compilation ? '✓' : '✗');
    console.log('  代码质量:', report.results?.linting ? '✓' : '✗');
    console.log('  三层架构:', report.results?.crossLayerConnectivity ? '✓' : '✗');
    console.log('  组件注册:', report.results?.registration ? '✓' : '✗');
    console.log('  ChainValidator 分数:', report.results?.chainValidator?.score ?? 'n/a');
    console.log('');
    console.log('  总体状态:', report.status || 'unknown');
  "
fi

echo -e "\n${YELLOW}下一步操作:${NC}"
echo "1. 若 Phase0~Phase4 尚未执行，请按照 manifest 与各 Phase README 逐步完成。"
echo "2. 启动开发服务器: npm run dev"
echo "3. 访问 http://localhost:3000/editor 并拖拽 ${COMPONENT_NAME} 验证 GUI 行为。"
